<template>
  <CommonCard title="今日订单" :value="numberFormat(orderToday)">
    <div ref="lineChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasis"> {{moneyFormat(orderLastDay)}}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue';
export default {
  name: 'TodayOrders',
  components: {
    CommonCard
  }
};
</script>

<script lang="ts" setup>
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { ref, onMounted, computed, watch, nextTick } from 'vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

// 定义页面中的标签对象
const lineChartRef = ref();
let lineChart: EChartsType;

// 1. 今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday);
// 2. 昨天订单
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay);
// 3. 水平轴数据
const orderTrendAxis = computed(() => reportDataStore.reportData.orderTrendAxis);
// 4. 垂直轴数据
const orderTrend = computed(() => reportDataStore.reportData.orderTrend);

// 准备配置项 根据配置项内容生成图片结构
const getOption = () => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      boundaryGap: false, // X轴两侧不留白
      // show:false,  // 不显示水平值
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // X轴数据类别
      data: orderTrendAxis.value
    },
    yAxis: {
      show: false // 垂直那些线也不要
    },
    series: [
      {
        name: '实时订单数',
        type: 'line',
        data: orderTrend.value,
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],

        // 将折线设置成平滑的曲线
        smooth: true,
        // 设置折线拐点的样式
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: 'purple'
        },
        lineStyle: {
          opacity: 0
        }
      }
    ],
    // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true
    }
  };
};
onMounted(() => {
  // ref格式的数据，在setup中使用的时候，一定要通过.value的方式来使用
  lineChart = echarts.init(lineChartRef.value);
  // lineChart.setOption(getOption());

  // 实现响应式效果
  window.addEventListener('resize', () => {
    lineChart && lineChart.resize();
  });
});

// 由于页面中的折线图需要的数据是从服务器端响应回来的,此时刷新页面的时候，会出现空白而没有图像
// 为了刷新也能够看到真正的折线图，应该在数据真正请求回来之后再使用此数据渲染图像
watch(
  orderToday,
  newvalue => {
    if (newvalue) {
      nextTick(() => {
        lineChart?.setOption(getOption());
      });
    }
  },
  {
    immediate: true
  }
);
</script>

<style>
</style>